﻿<template>
      <!--send box s-->
      <div class="wrap_letter_send_box">
        <p>
          <i>
            <img src="../../../static/img/layer_certain_ok_sign.png" alt="" class="layer_ok">
          </i>
          <span class="letter_title">
            发送成功
          </span>
        </p>
        <p>
          愿你们能成为更好
        </p>
         <p>
           的知己好友！
         </p>
         <div class="wrap_user_img">
           <img v-bind:src="send_user_img" alt="">
         </div>
         <div class="finish_list" v-on:click="goTo_finish">
              完善资料
         </div>
        <img src="../../../static/img/letter/b.png" class="bried_b" />
        <img src="../../../static/img/letter/Planesman.png" class="Planesman">
        <!-- <img src="../../../static/img/letter/mid_b.png" class="mid_b">-->
        <img src="../../../static/img/letter/certain_layer_inmg.png" class="certain_layer_inmg">
        <!--
         <p class="next_title">
           接下来你可以
         </p>-->
        <!--<div class="layer_certain_btn_1"></div>-->
        <!--<div class="layer_certain_btn_1">跟深入的了解Ta</div>-->
        <!--<div class="layer_certain_btn_2"></div>
        <div class="layer_certain_btn_3"></div>-->
      </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import "../../../static/css/Letter/Certain_layer.css";
  import { Toast } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      send_user_img:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  mounted: function(){
    this.$emit("hide_load")
    this.send_user_img = this.get_user_letter();
  },
  methods: {
    ...mapGetters([
      "get_user_letter"
    ]),
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goTo_finish: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/Wrap_login", router: this.$router
        });
    }
  }
}
</script>
<style scoped>
  .letter_title {
    color: #b97e5e;
  }
  .certain_layer_inmg {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 1;
  }

  .mid_b {
    position: absolute;
    top: 109.4vw;
    right: 22.6vw;
    width: 10vw;
    height: 8.6vw;
    z-index: 100;
  }

  .Planesman {
    position: absolute;
    height: 20.4vw;
    width: 23.7vw;
    top: 8.8vw;
    right: 1.4vw;
  }

  .bried_b {
    position: absolute;
    top: 4vw;
    left: 4.6vw;
    width: 13vw;
    height: 11.2vw;
  }
  .index_main .letter_send_box {
    background-color: #9f5c2f;
    border-radius:0;
  }
  .finish_list {
    position:absolute;
    z-index:100;
    left:50%;
    transform:translateX(-50%);
    width: 36%;
    letter-spacing: 1px;
    margin: 4vw auto 0;
    background-color: #4eae4d;
    color: #fff;
    border-radius: 2vw;
    box-shadow: 2px 3px 8px 2px rgba(25, 24, 24, 0.49);
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 0.7rem;
  }
  .wrap_letter_send_box {
    padding-top:0;
    background-image:none;
   /*height: 18rem;*/
   height:100%;
   width:100%;
   position:relative;
   background-color:#fff;
  }
  .letter_send_box p:nth-child(1){
    padding-top:2rem;
    margin-top:0;
  }
  .letter_send_box p:nth-child(2){
    padding-top:1rem;
  }
  .layer_certain_btn_1 {
    width: 60%;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto 0.1rem;
  }
  .layer_certain_btn_2 {
    width: 60%;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto 0.1rem;
  }
  .wrap_user_img {
    margin-bottom: 0.5rem;
    width: 8rem;
    height: 8rem;
    margin: 4rem auto;
  }
  .wrap_user_img img{
    width:7.5rem;
    height:7.5rem;
  }
  .letter_send_box p:nth-child(3) {
    margin-bottom: 0.5rem;
    color: #9f7159;
  }
  .letter_send_box p:nth-child(2) {
    margin-top: 0.8rem;
    color: #9f7159;
  }
  .wrap_letter_send_box{
    border-radius:0;
    line-height:1.4;
    color:#fff;
  }
</style>
